<template>
  <div class="register-container">
    <div class="register-card">
      <div class="register-header">
        <h1 class="register-title">
          <span class="login-link-text" @click="goToLogin">登录 /</span> 注册
        </h1>
      </div>

      <form @submit.prevent="handleRegister">
        <div class="form-item">
          <var-input v-model="phone" placeholder="手机号" class="custom-input" maxlength="11" />
        </div>

        <div class="form-item">
          <var-input
            v-model="password"
            :type="passwordVisible ? 'text' : 'password'"
            placeholder="设置密码"
            class="custom-input"
          />
        </div>

        <div class="form-item">
          <var-input
            v-model="confirmPassword"
            :type="confirmPasswordVisible ? 'text' : 'password'"
            placeholder="确认密码"
            class="custom-input"
          />
        </div>

        <div class="agreement">
          <var-checkbox v-model="agreeTerms">
            <span class="agreement-text">
              我已阅读并同意
              <a href="javascript:void(0)">《用户协议》</a>
              和
              <a href="javascript:void(0)">《隐私政策》</a>
            </span>
          </var-checkbox>
        </div>

        <var-button
          class="register-button"
          type="primary"
          block
          :loading="loading"
          native-type="submit"
        >
          注册
        </var-button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  Input as VarInput,
  Button as VarButton,
  Checkbox as VarCheckbox,
  Snackbar,
} from '@varlet/ui'
import '@varlet/ui/es/style'

const router = useRouter()
const phone = ref('')
const password = ref('')
const confirmPassword = ref('')
const agreeTerms = ref(false)
const passwordVisible = ref(false)
const confirmPasswordVisible = ref(false)
const loading = ref(false)

const goToLogin = () => {
  router.push('/login')
}

const handleRegister = async () => {
  if (!phone.value || !password.value || !confirmPassword.value) {
    Snackbar.warning('请填写完整信息')
    return
  }

  if (password.value !== confirmPassword.value) {
    Snackbar.warning('两次输入的密码不一致')
    return
  }

  if (!agreeTerms.value) {
    Snackbar.warning('请阅读并同意用户协议和隐私政策')
    return
  }

  loading.value = true

  try {
    // 模拟注册请求
    await new Promise((resolve) => setTimeout(resolve, 1500))

    // 这里应该是实际的注册逻辑
    Snackbar.success('注册成功！')
    router.push('/login')
  } catch (error) {
    Snackbar.error('注册失败，请重试')
    console.error(error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.register-card {
  width: 100%;
  max-width: 360px;
  background-color: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.register-header {
  margin-bottom: 40px;
}

.register-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
}

.login-link-text {
  font-size: 24px;
  color: #999;
  font-weight: normal;
  cursor: pointer;
}

.form-item {
  margin-bottom: 20px;
}

.custom-input {
  --input-blur-color: transparent;
  --input-focus-color: transparent;
  --input-error-color: #f44336;
  --input-focus-background: #f5f5f5;
  --input-blur-background: #f5f5f5;
  border-radius: 50px;
  height: 50px;
  padding: 0 20px;
}

.agreement {
  margin: 20px 0;
}

.agreement-text {
  font-size: 14px;
  color: #666;
}

.agreement-text a {
  color: #5b86e5;
  text-decoration: none;
}

.register-button {
  height: 50px;
  border-radius: 50px;
  font-size: 16px;
  margin-top: 20px;
  background-image: linear-gradient(to right, #36d1dc, #5b86e5);
  box-shadow: 0 4px 15px rgba(91, 134, 229, 0.3);
}

:deep(.var-input__controller) {
  padding: 0;
}

:deep(.var-input__icon) {
  margin-right: 12px;
}

:deep(.var-button--normal) {
  padding: 0;
}
</style>
